<template>
    <div id="ServerLoad" class="ServerLoad">
        <div>
            <el-table
            height="100%"
            :header-cell-style="{
                background:'rgb(2, 16, 51)',
                color:'aliceblue',
                border:'0px',
                'text-align':'center',
                padding:'0px 0px 0px 0px',
                'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset'}"
            :cell-style="{
                background:'rgb(2, 16, 51)',
                color:'aliceblue',
                border:'1px solid rgb(4, 44, 119)',
                'border-right':'0px',
                'border-left':'0px',
                'text-align':'center',
                padding:'1% 0 0 0'}"
            :data="tableData"
            style="width: 100%; "
            class="text"
        >
            <el-table-column
                type="index"
                width="20">
            </el-table-column>
            <template v-for="(item) in tableColumns">
                <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    align="center"
                    :width="item.width"
                    :key="item.prop">
                    <template v-slot="scope">
                        <template v-if="item.format == 'progress'">
                            <el-progress
                                :percentage="Number(calcCheng(scope.row[item.prop], 100).toFixed(0))" 
                                :color="customColorMethod"
                                :show-text="true">
                            </el-progress>
                        </template>
                        <template v-else>
                            <div>
                                {{ scope.row[item.prop] }}
                            </div>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        </div>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';
import tableColumns from './ServerLoadTableColumns.js';

export default {
    data() {
        return {
            postData: {
                opera: 'hostCpuMemory',
                curPage: 1,
                pageSize: 4,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {}
            },
            tableData: [],
            tableColumns: tableColumns,
            timerName: 'ServerLoad',
            timerEventName: 'timerServerLoad',
            timerInterval: 1000 * 10,
        }
    },
    created() {
        this.getData();
		this.timein();
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
        
    },
    mounted() {

    },
    computed: {
        
    },
    methods: {
		timein(){
			this.timer = setInterval(() => {
			  // 操作
			  this.getData();
			}, 30000);
			// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
			// this.$once('hook:beforeDestroy', () => {
			//   clearInterval(this.timer);
			// })
		},
        getData(){
            fetchData({
                postData : JSON.stringify(this.postData)
            }).then((res) => {
                if(res.data.length>3){
                    this.tableData = res.data.slice(0,3);
                }else{
                    this.tableData = res.data;
                }
            });
        },
        customColorMethod(percentage) {
            if (percentage <= 50) {
                return '#67c23a';
            } else if (percentage <= 75) {
                return '#e6a23c';
            } else {
                return '#f56c6c';
            }
        },
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>
@media screen and (max-width: 1365px) and (min-width: 1280px) {
    .text {
        font-size: 10px;
    }
    
}
@media screen and (max-width: 1600px) and (min-width: 1365px) {
  .text {
        font-size: 12px;
    }
  
}
@media screen and (max-width: 1920px) and (min-width: 1600px) {
  .text {
        font-size: 14px;
    }
}
@media screen and (max-width: 2560px) and (min-width: 1920px) {
  .text {
        font-size: 16px;
    }
  
}
@media screen  and (min-width: 2560px) {
  .text {
        font-size: 18px;
    }
}
.ServerLoad{
    /* width: 100%; */
    
    height: 93%;
    display: grid;
    justify-items: center;
    grid-template-columns:1fr ;
}
.ServerLoad>div{
    
    /* border: 1px solid red; */
    width: 94%;
    height: 98%;
}
.ServerLoad>>> .el-table::before{
    height: 0px !important;
}
.ServerLoad>>> .el-table th, .el-table tr{
    background-color: rgb(1, 40, 107);
}
.ServerLoad>>> .el-table{
    background: rgb(2, 16, 51);
}
.ServerLoad>>> .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; 
    height: 6px; 
}
.ServerLoad>>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(4, 44, 119, 0.7);
    border-radius: 3px;
}
</style>    